<template>
  <div>
    <!-- 文件上传表单 -->
    <form @submit.prevent="uploadFiles">
      <input type="file" multiple ref="fileInput" @change="handleFileChange">
      <button type="submit">Upload</button>
    </form>
    <p v-if="progress > 0">{{ progress }}% uploaded</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: Array,
});

const progress = ref(0);
const uploadFiles = ref(props.modelValue);
const files = ref([]);

const handleFileChange = (event) => {
  files.value = event.target.files;
  uploadFilesf()
};

const uploadFilesf = async () => {
  const formData = new FormData();
  for (let i = 0; i < files.value.length; i++) {
    formData.append('file', files.value[i], files.value[i].name);
  }

  try {
    uploadFile(formData).then((res)=>{
      console.log(res,'formData')

    })
  } catch (error) {
    console.error(error);
  }


};
</script>